<template>
	<div class="message">
		<el-popover
			:show-after="500"
			placement="bottom"
			:width="400"
			trigger="click"
			popper-class="header-message-popover"
			class="shadow-lg"
		>
			<template #reference>
				<el-badge :value="state.notifyCount" class="item cursor-pointer" title="系统消息">
					<i :class="'iconfont iconmessage-square1'" class="toolBar-icon"></i>
				</el-badge>
			</template>
			<div>
				<notifyList v-if="state.notifyCount" @refresh="init()"></notifyList>
				<div v-else class="message-empty">
					<img src="@/assets/images/notData.png" alt="notData" />
					<div>暂无消息</div>
				</div>
			</div>
			<el-tabs v-if="false" v-model="activeName" stretch>
				<el-tab-pane :label="`通知(${state.notifyCount})`" name="first">
					<notifyList v-if="state.notifyCount" @refresh="init()"></notifyList>
					<div v-else class="message-empty">
						<img src="@/assets/images/notData.png" alt="notData" />
						<div>暂无消息</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="消息(0)" name="second">
					<div class="message-empty">
						<img src="@/assets/images/notData.png" alt="notData" />
						<div>暂无消息</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="代办(0)" name="third">
					<div class="message-empty">
						<img src="@/assets/images/notData.png" alt="notData" />
						<div>暂无代办</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
import { subCountNotifyRecord } from "@/api/modules/notification";
import { ref } from "vue";
import notifyList from "./notifyList";
const activeName = ref("first");
onMounted(() => {
	init();
});
const state = reactive<any>({
	notifyCount: 0
});
const init = async () => {
	let { result } = await subCountNotifyRecord({});
	state.notifyCount = result;
};
</script>

<style lang="scss">
.el-popover.el-popper.header-message-popover {
	padding: 5px 0 10px;
	box-shadow: -1px 1px 10px #cccccc;
	.el-tabs__header {
		margin-bottom: 0;
		.el-tabs__nav-wrap {
			padding: 0 15px;
		}
	}
	.header-message-panel {
		max-height: calc(100vh - 84px);
		overflow: auto;
		.header-message-item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 45px;
			padding: 0 15px;
			border-bottom: 1px solid #e8e8e8;
		}
		.header-message-item-content {
			display: flex;
			align-items: center;
			min-height: 45px;
			padding: 10px 20px;
			line-height: 25px;
		}
		.header-message-item-footer {
			padding: 8px 15px;
			color: #777777;
			background: #f9f9f9;
		}
	}
}
.message-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 260px;
	line-height: 45px;
}
.message-list {
	display: flex;
	flex-direction: column;
	.message-item {
		display: flex;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid var(--el-border-color-light);
		&:last-child {
			border: none;
		}
		.message-icon {
			width: 40px;
			height: 40px;
			margin: 0 20px 0 5px;
		}
		.message-content {
			display: flex;
			flex-direction: column;
			.message-title {
				margin-bottom: 5px;
			}
			.message-date {
				font-size: 12px;
				color: var(--el-text-color-secondary);
			}
		}
	}
}
</style>
